<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>生崽</title>
    <link rel="stylesheet" type="text/css" href="CSS日历样式.css">
</head>
<body>

<h1>CSS 日历</h1>

<div class="month">
    <ul>
        <li class="prev"><</li>
        <li class="next">></li>
        <li style="text-align: center">
            August<br>
            <span style="font-size: 18px">2016</span>
        </li>
    </ul>
</div>

<ul class="weekdays">
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li>
    <li>Sunday</li>
</ul>

<ul class="days">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <!--    这里使用span标签，主要是对10这个数字进行修饰-->
    <li><span class="active">10</span></li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
</ul>
</body>
</html>


<!--
    HTML <ul> 是‌无序列表‌（Unordered List）标签，用于创建项目列表，列表项前通常显示为圆点、方块等符号标记
       基本语法结构：
           <ul>
              <li>列表项1</li>
              <li>列表项2</li>
              <li>列表项3</li>
           </ul>
      功能特性：‌
         用于表示一组没有特定顺序的项目
         每个列表项使用 <li> 标签定义
         默认在列表项前显示实心圆点（•）
         可通过CSS自定义列表标记样式

      与有序列表 <ol> 的区别：‌
         <ul>：项目顺序不重要，显示为符号标记
         <ol>：项目有特定顺序，显示为数字或字母编号

     前端界面里面的 px表示像素(Pixel)


    <span></span> 标签
    <span> 是 HTML 中的一个内联容器元素，主要用于对文本或其他内联元素进行分组和样式化
    主要特点：‌
        内联元素‌：不会独占一行，仅占据其内容所需的空间
        无语义含义‌：本身不带有任何语义，纯粹用于样式和脚本操作
        常用场景‌：
            对部分文本应用特定样式（颜色、字体等）
            通过 JavaScript 操作特定文本片段
            配合 CSS 类名实现精细化样式控制

    与 <div> 的区别：‌
        <span> 是内联元素，适合文本级别操作
        <div> 是块级元素，适合页面布局和结构分组
        <span> 元素在前端开发中非常实用，特别适合需要对小段内容进行独立控制的情况
-->